<!--
 * @Author: modefy
 * @Date: 2023-04-27 10:22:22
 * @LastEditors: wangdan
 * @LastEditTime: 2023-05-10 16:02:43
 * @Description: Description
-->
<template>
  <div class="book-container">
    <div class="left-content">
      <div class="title">热门分类</div>

      <div class="sort-list">
        <div
          :class="['item', active == item.id ? 'active' : '']"
          v-for="(item, index) in bookClassification"
          :key="index"
          @click="click(item)"
        >
          <div class="icon">
            <img :src="item.img" alt="" />
          </div>
          <div class="content">
            <div class="title">{{ item.name }}</div>
            <div class="bottom">
              <div class="bottom-item">
                <div class="label">阅读人数:</div>
                <div class="value">{{ item.number }}</div>
              </div>

              <div class="bottom-item">
                <div class="label">数量:</div>
                <div class="value">{{ item.inventory }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="right-content">
      <bookshelf :keyType="keyType"></bookshelf>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue"
import bookshelf from "@/components/common/bookshelf.vue"
import HistoryIcon from "@/assets/images/books/history.jpg"
import BookIcon from "@/assets/images/books/book.jpg"
import PersonIcon from "@/assets/images/books/person.jpg"
import MoneyIcon from "@/assets/images/books/money.jpg"
import PsychologyIcon from "@/assets/images/books/psychology.jpg"
import Biographies from "@/assets/images/books/biographies.jpg"

const bookClassification = ref([
  {
    id: 1,
    key: "literature",
    img: BookIcon,
    name: "文学",
    number: 124,
    inventory: 25
  },
  {
    id: 2,
    img: HistoryIcon,
    key: "history",
    name: "历史",
    number: 50,
    inventory: 13
  },
  {
    id: 3,
    img: PersonIcon,
    key: "development",
    name: "个人成长",
    number: 100,
    inventory: 29
  },
  {
    id: 4,
    img: MoneyIcon,

    name: "经济理财",
    key: "money",
    number: 64,
    inventory: 25
  },
  {
    id: 5,
    img: PsychologyIcon,
    name: "心理",
    key: "psychology",
    number: 29,
    inventory: 25
  },
  {
    id: 6,
    img: Biographies,
    key: "perpson",
    name: "人物传记",
    number: 422,
    inventory: 125
  }
])
const active = ref(1)
const keyType = ref("literature")
const click = (item) => {
  active.value = item.id
  keyType.value = item.key
  console.log(keyType.value, "111")
}
</script>

<style lang="scss" scoped>
.book-container {
  width: 100%;
  height: 100%;
  background-color: #fff;
  box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.05);
  padding: 10px;
  box-sizing: border-box;
  display: flex;
  align-items: center;

  .left-content {
    height: 100%;

    .title {
      margin-bottom: 10px;
    }
    .sort-list {
      width: 240px;
      height: 100%;
      border-right: 1px solid #eee;
      display: flex;
      align-items: center;
      flex-direction: column;
      height: 752px;
      overflow-y: auto;

      .item {
        width: 100%;
        height: 90px;
        cursor: pointer;
        padding: 5px 5px;
        box-sizing: border-box;
        border-bottom: 1px solid #f4f3f2;
        display: flex;
        align-items: center;

        .icon {
          width: 60px;
          height: 100%;

          img {
            width: 100%;
            height: 100%;
          }
        }

        .content {
          flex: 1;
          margin-left: 12px;
          color: #0e1922;
          font-weight: bold;
          font-size: 14px;

          .bottom {
            display: flex;

            .bottom-item {
              display: flex;
              font-size: 12px;
              margin-top: 10px;
              color: #999;
              font-weight: normal;
              margin-right: 10px;

              .label {
                margin-right: 3px;
              }
            }
          }
        }
      }
      .active {
        background: rgba(48, 49, 51, 0.1);
        transform: scale(1.1);
        transition: all 0.5s;
        box-shadow: -2px 2px 2px #999;
      }

      .item:hover .icon {
        transform: scale(1.1);
        transition: all 0.5s;
      }
    }

    .sort-list::-webkit-scrollbar {
      /*滚动条整体样式*/
      width: 5px; /*高宽分别对应横竖滚动条的尺寸*/
      height: 1px;
    }
    .sort-list::-webkit-scrollbar-thumb {
      /*滚动条里面小方块*/
      border-radius: 10px;
      background-color: skyblue;
      background-image: -webkit-linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.2) 25%,
        transparent 25%,
        transparent 50%,
        rgba(255, 255, 255, 0.2) 50%,
        rgba(255, 255, 255, 0.2) 75%,
        transparent 75%,
        transparent
      );
    }
    .sort-list::-webkit-scrollbar-track {
      /*滚动条里面轨道*/
      box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
      background: #ededed;
      border-radius: 10px;
    }
  }

  .right-content {
    flex: 1;
    height: 100%;
  }
}
</style>
